﻿@model IEnumerable<TuanAnhPersonalWeb.Models.TUANANH__IMAGE>
<link href="../../Content/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.lightbox-0.5.js" type="text/javascript"></script>
<style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {

        width: 100%;
        height: 100%;
        margin: auto;
        overflow: hidden;
    }
    #gallery ul { list-style: none;margin: 0px;padding: 0px 10px 0px 25px;}
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #9e8a6a;
        border-width: 5px 5px 10px;
        border-radius: 10px;
    }
    #gallery ul a:hover img 
    {
        box-shadow: 0 0 5px 5px white;
        border: 5px solid lightgray;
        border-width: 5px 5px 10px;
        color: #036433;
		
    }
    #gallery ul a:hover { color: #9e8a6a; }
    .imga 
    {
        margin:20px 25px 0px 0px;
        width: 170px;
        height: 170px;
    }
    h3
    {
        color:#036433
    }
	/*album/*/

    
    
    #g_round_slide{
        width:900px;
        margin: auto;
        overflow:hidden;
        height: auto;
        height: 100%
    }

    #g_slide{
	    width:10000px;
        height: 100%;
    }

    .g_slide_selected {
        -moz-box-shadow: 2px 2px 4px  black;
        -webkit-box-shadow: 2px 2px 4px black;
        box-shadow: 2px 2px 4px black;
    }

    #g_slide img{
	    width: 200px;
	    height:200px;
	    margin-right: 25px;
	    border-radius: 10px;
	    border: 1px black solid;
	    opacity: 0.5
    }
    
    #g_slide img:hover {
        opacity: 1;
        -moz-box-shadow: 2px 2px 4px  black;
        -webkit-box-shadow: 2px 2px 4px black;
        box-shadow: 2px 2px 4px black;
    }
</style>
<div id="gallery">
    <div class="title" style="padding: 30px 0px 10px 0px; text-align: center; width: 100%"> @ViewBag.AlbumName</div>
    <ul>
        @foreach (var m in @Model)
        {
            <li>
                <a class = "imga" href="@m.IMAGE_DIR" title="@m.IMAGE_DESCRIPTION">
                    <img class="imga" src="@m.IMAGE_DIR"  alt="" />
                </a>
            </li>
        }
    </ul>
</div>


 <script type="text/javascript">
     $(function () {
         $('#gallery a').lightBox();
     });
 </script>

